<template>
  <div class="color-body" w-full h-2rem lh-2rem>
    <el-dialog v-model="showTaskDetail" title="任务" width="500" :show-close="false">
      <ElTable :data="defaultTaskManager.tasks" height="300">
        <el-table-column label="#" width="80">
          <template #default="scope">
            <div> {{ scope.$index }} </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template #default="scope">
            <ElIcon v-if="defaultTaskManager.finished[scope.$index]">
              <ElIconCheck c-green />
            </ElIcon>
            <ElIcon v-else>
              <ElIconLoading />
            </ElIcon>
          </template>
        </el-table-column>
        <el-table-column label="结果" width="180">
          <template #default="scope">
            <CommonAsyncValue v-if="defaultTaskManager.finished[scope.$index]" :value="scope.row" prop="message" />
            <div v-else> - </div>
          </template>
        </el-table-column>
      </ElTable>
    </el-dialog>
    <div px flex items-center>
      <div class="my-action" @click="showTaskDetail = true">
        <div v-if="nAllTasks === nFinishedTasks && nProcesses === 0" flex items-center>当前无进程</div>
        <div v-else-if="nAllTasks > nFinishedTasks && nProcesses === 0" flex items-center>
          <div class="dot" bg-amber mr2></div>
          <span>任务进行中({{ nAllTasks - nFinishedTasks }})</span>
        </div>
        <div v-else-if="nAllTasks === nFinishedTasks && nProcesses > 0" flex items-center>
          <div class="dot" bg-amber mr2></div>
          <span>服务运行中({{ nProcesses }})</span>
        </div>
        <div v-else flex items-center>
          <div class="dot" bg-amber mr2></div>
          <span>任务({{ nAllTasks - nFinishedTasks }}), 服务({{ nProcesses }})</span>
        </div>
      </div>
      <div mlauto v-if="oProjectUnsave" flex items-center>
        <div class="dot" bg-white w1 h1 mr2></div>
        文件未保存
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { defaultTaskManager } from '~/models/Task/TaskManager';
import { oProjectUnsave } from '~/models/Project';

const nAllTasks = computed(() => defaultTaskManager.value.tasks.length)
const nFinishedTasks = computed(() => defaultTaskManager.value.finished.filter(x => x === true).length)

const nProcesses = computed(() => defaultTaskManager.value.progresses.length)

const showTaskDetail = ref(false)
</script>